<template>
  <div class="noFillList">
    <my-bread-crumb>
      <el-breadcrumb-item>信息管理</el-breadcrumb-item>
      <el-breadcrumb-item>未填报名单</el-breadcrumb-item>
    </my-bread-crumb>
    <el-card class="box-card">
      <!--查询表单      -->
      <el-form ref="dataFormRef" :model="data" label-width="60px" :inline="true" >
        <el-form-item label="性别" prop="gender">
          <el-select v-model="data.gender" placeholder="请选择">
            <el-option label="男" value="男"></el-option>
            <el-option label="女" value="女"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="学院" prop="department">
          <el-input v-model="data.department"></el-input>
        </el-form-item>
        <el-form-item label="班级" prop="classname">
          <el-input v-model="data.classname"></el-input>
        </el-form-item>
        <el-form-item label="时间" prop="createTime">
          <el-date-picker
            v-model="data.createTime"
            type="date"
            placeholder="选择日期">
          </el-date-picker>
        </el-form-item>
        <el-form-item class="form-button-item">
          <el-button type="primary" @click="submitForm">查询</el-button>
          <el-button @click="resetForm">重置</el-button>
        </el-form-item>
        <el-form-item class="export-button">
          <el-button type="primary" @click="exportExcel">导出excel文件</el-button>
        </el-form-item>
      </el-form>
      <!--table内容  -->
      <el-table
        :data="result.records"
        stripe>
        <el-table-column type="index" label="#"></el-table-column>
        <el-table-column prop="username" label="学号"></el-table-column>
        <el-table-column prop="name" label="姓名"></el-table-column>
        <el-table-column prop="gender" label="性别"></el-table-column>
        <el-table-column prop="identityCategory" label="身份类别"></el-table-column>
        <el-table-column prop="schoolLocation" label="所在校区"></el-table-column>
        <el-table-column prop="department" label="学院"  width="200px"></el-table-column>
        <el-table-column prop="classname" label="班级"  width="200px"></el-table-column>
      </el-table>
      <!-- 分页条   -->
      <div class="block">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="data.current"
          :page-sizes="[5, 10, 20, 30]"
          :page-size="data.size"
          layout="total, sizes, prev, pager, next, jumper"
          :total="result.total">
        </el-pagination>
      </div>
    </el-card>
  </div>

</template>

<script>
import {getNoFillListExcel, getNoFillList} from '@/network/admin'
import MyBreadCrumb from "@/components/MyBreadCrumb";
export default {
  name: "NoFillList",
  components: {MyBreadCrumb},
  data(){
    return{
      data:{
        current:1,
        size:10,
        gender:'',
        department:'',
        classname:'',
        createTime:new Date()
      },
      result:{
        total:0,
        pages:1,
        records:[]
      }
    }
  },
  created() {
    this.getNoFills();
  },
  methods:{
    exportExcel(){
      getNoFillListExcel(this.data).then(res=>{
        let downloadFile=document.createElement('a');
        let blob=new Blob([res.data], {type:"application/vnd.ms-excel;charset=UTF-8"});
        downloadFile.href=window.URL.createObjectURL(blob);
        downloadFile.download=
          decodeURI(res.headers['content-disposition'].split('filename=')[1]);
        downloadFile.click();
        window.URL.revokeObjectURL(downloadFile.href);
      })
    },
    async getNoFills(){
      const {data:res,code} = await getNoFillList(this.data)
      if(code===200){
        console.log(res);
        this.result.records=res.records;
        this.result.total=res.total;
        this.result.pages=res.pages;
      }
      else{
        this.$message.error({message:"获取不到未填报名单！",duration:1000});
      }
    },
    resetForm(){
      this.$refs.dataFormRef.resetFields();
    },
    handleSizeChange(newValue){
      this.data.size=newValue
      this.data.current=1;
      this.getNoFills();
    },
    handleCurrentChange(newValue){
      this.data.current=newValue;
      this.getNoFills();
    },
    submitForm(){
      this.data.current=1;
      this.getNoFills();
    }

  }
}
</script>

<style scoped>
  .form-button-item{
    float:right;
  }
  .el-form{
    border-bottom: 1px solid #EBEBEB;
  }
  .export-button{
    margin-left:20px;
  }
</style>
